<template>
  <view>
    <view class="search-box">
      <uni-search-bar @confirm="search" @input="input" :radius="100"cancelButton="none" focus="true" :value="keyWord"></uni-search-bar>
    </view>
    <!--搜索结果同步显示-->
    <view class="search-result-list" v-if="searchResults.length != 0">
      <view class="search-result-item" v-for="(product,i) in searchResults" :key = "i" @click="showDetail(product)">
        <view class="product-name">{{product.name}}</view>
        <uni-icons type="arrowright" size = 16></uni-icons>
      </view>
    </view>
    <!--搜索历史-->
    <view class="search-history-box" v-else>
      <view class="search-history-title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="16" @click="cleanHistory"></uni-icons>
      </view>
      <!--搜索历史列表-->
      <view class="search-history-list">
        <uni-tag :text="item" v-for="(item, i) in histories" :key = "i" @click="getSearchHistoryItem(item)"></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timer: null,
        keyWord:"",
        searchResults:[],
        searchHistoryList:[]
      };
    },
    onLoad(){
      //加載儲存的搜索历史
      this.searchHistoryList = JSON.parse(uni.getStorageSync('searchHistory') || '[]')
    },
    methods:{
      //加了个延时器,过500毫秒才会記錄一次輸入
      input(data){
        clearTimeout(this.timer)
        this.timer = setTimeout(()=>{
           this.keyWord = data
           this.getsearchResult()
        },500)
      
      },
      //get請求搜索帶关鍵字的结果
      async getsearchResult(){
        if(this.keyWord === ""){
          this.searchResults = []
          return
        }else{
          const {data:res} = await uni.$http.get('/search/'+ this.keyWord)
          if(res.meta.status !== 200) return uni.$showMessage()
          this.searchResults = res.list
          //存成搜索历史
          this.saveSearchHistory()
        }
      },

      //点击結果跳轉
      showDetail(product){
        uni.navigateTo({
          url: '/subpackage/product_detail/product_detail?product_id' + product.id
        })
      },
      saveSearchHistory(){
        //用set去重,且结果永远在前
        const historySet = new Set(this.searchHistoryList)
        historySet.delete(this.keyWord)
        historySet.add(this.keyWord)
        this.searchHistoryList = Array.from(historySet)
        
        //搜索历史保存本地
        uni.setStorageSync('searchHistory',JSON.stringify(this.searchHistoryList))
      },
      //清空搜索历史
      cleanHistory(){
        this.searchHistoryList = []
        uni.setStorageSync('searchHistory',"[]")
      },
      getSearchHistoryItem(item){
        this.input(item)
      }
    },
    computed:{
      histories(){
        return [...this.searchHistoryList].reverse()
      }
    }
  }
</script>

<style lang="scss">
  //搜索框显示样式
  .search-box{
    background-color: #18BC37;
    position: sticky;
    top:0;
    z-index: 999;
  }
  .search-result-list{
    padding:0 5px;
    .search-result-item{
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px 0;
      border-bottom:1px solid #efefef;
      
      .product-name{
        white-space: nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        
      }
    }
  }
  .search-history-box{
    padding: 0 5px;
    .search-history-title{
      display: flex;
      justify-content: space-between;
      height: 40px;
      align-items: center;
      font-size: 14px;
      border-bottom: 1px solid #efefef;
    }
    .search-history-list{
      display: flex;
      flex-wrap: wrap;
      .uni-tag{
        margin-top: 5px;
        margin-right: 5px;
      }
    }
  }

</style>
